<template>
  <div>
    <van-popup :z-index="1600" v-model="showCover" position="center">
      <div class="cardView">
        <div class="infoView">
          <p class="tipLabel">更换企业</p>
          <div class="singleView">
            <p class="tagLabel">员工</p>
            <p class="nameLabel">{{user.nickname}}</p>
          </div>
          <div class="singleView">
            <p class="tagLabel">原企业</p>
            <p class="nameLabel">{{enterpriseName}}</p>
          </div>
          <div class="chooseSingleView" @click="chooseOpen">
            <p class="tagLabel">迁移至</p>
            <div class="chooseView">
              <p class="nameLabel">{{selectItem.enterpriseName}}</p>
              <img src="/web-hft-ee/static/img/university/up-down.png">
            </div>
          </div>
          <div v-if="showChoose" class="chooseListView">
            <div v-for="(el, idx) in list" class="itemView" @click="chooseClick(el)">
              <p class="itemLabel ellipsis1">
                {{el.enterpriseName}}</p>
            </div>
          </div>
        </div>

        <div v-if="!showChoose" class="btnView">
          <div class="cancelBtn" @click="cancelClick">
            取消
          </div>
          <div style="height: 48px; width: 1px; background-color: #E4E8EC"></div>
          <div class="submitBtn" @click="submitClick">
            确定
          </div>
        </div>
      </div>

    </van-popup>
  </div>
</template>

<script>
  import TeamAPI from '@/repo/api/TeamAPI'
  // import Vue from 'vue'
  import {Popup, Button, Toast} from 'vant'
  import UniversityTool from "../../UniversityTool";

  Vue.use(Popup, Button)

  export default {
    name: "MoveMemberCover",
    props: ['showStatus', 'user', 'enterpriseName'],
    data() {
      return {
        showCover: false,
        showChoose: false,
        list: [],
        selectItem: {},
      }
    },
    model: {
      prop: 'showStatus',
      event: 'changeStatus'
    },
    watch: {
      showStatus: {
        handler: function (val, oldval) {
          this.showCover = val
        },
        immediate: true
      },
      showCover() {
        this.selectItem = {}
        this.$emit('changeStatus', this.showCover)
      },
    },
    created() {
      this.getTeamList()
    },
    methods: {
      chooseOpen() {
        this.showChoose = !this.showChoose
      },
      chooseClick(el) {
        this.showChoose = false
        this.selectItem = el
      },
      cancelClick() {
        this.showCover = false
      },
      submitClick() {
        if (!this.selectItem.id) {
          Toast('请先选择目标企业')
          return
        }
        Toast.loading({
          duration: 0,
          message: '',
          forbidClick: true,
        });
        this.moveMember()
      },
      getTeamList() {
        UniversityTool.getEnterpriseInfoMapByIds([]).then((res) => {
          this.list = res
        })
      },
      moveMember() {
        TeamAPI.superMoveMember(this.user.userid, this.selectItem.id).then((res) => {
          Toast.clear()
          this.$emit('sendMoveSuccess')
          this.showCover = false

        }).catch((err) => {
          Toast.clear()
        })

      }
    }
  }
</script>

<style scoped>
  .cardView {
    width: 70vw;
    /*border-radius: 8px;*/
  }

  .infoView {
    padding: 16px 16px 0 16px;
  }

  .tipLabel {
    font-size: 16px;
    font-weight: bold;
    padding-bottom: 16px;
  }

  .singleView {
    margin-left: 0;
    margin-right: 0;
    margin-top: 8px;
    padding: 8px 8px;
    display: flex;
    border: #E4E8EC 1px solid;
    align-items: center;
  }

  .chooseSingleView {
    margin-left: 0;
    margin-right: 0;
    margin-top: 8px;
    padding: 8px 8px;
    display: flex;
    border: #E4E8EC 1px solid;
    align-items: center;
    position: relative;
  }

  .tagLabel {
    width: 60px;
    font-size: 14px;
    color: #9B9B9B;
  }

  .nameLabel {
    font-size: 14px;
    font-weight: bold;
    flex: 1;
  }

  .chooseView {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }

  .chooseListView {
    margin-bottom: 16px;
    height: 90px;
    background-color: white;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .itemView {
    border-bottom: #E4E8EC 1px solid;
    border-left: #E4E8EC 1px solid;
    border-right: #E4E8EC 1px solid;
    padding: 10px 8px;
  }

  .itemLabel {
    font-size: 14px;
  }
  .btnView {
    border-top: #E4E8EC 1px solid;
    height: 48px;
    margin-top: 58px;
    display: flex;
  }

  .cancelBtn {
    width: 50%;
    font-size: 16px;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }

  .submitBtn {
    width: 50%;
    font-size: 16px;
    color: #1DA1F2;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }


</style>
